<template>
  <div class="d_main">
    <!-- 操作区 S-->
    <div class="d_operationBox">
      <div class="d_btn">
        <el-button type="primary" size="small" icon="el-icon-plus"  v-permission="'MenuCode5-3-3-1'" @click="newAddClick">新建</el-button>
      </div>
      <div class="d_search">
      <screec
          v-model="search.QueryDataBaseFiled"
          :headData.sync="tableHead"
          :disabled="searchLoading"
        ></screec>
        <el-input
          v-model="search.likeWords"
          placeholder="请输入关键字"
          size="small"
          @keyup.enter.native="getDataList"
        >
          <el-button
            slot="append"
            :loading="searchLoading"
            type="primary"
            icon="el-icon-search"
            :disabled="searchLoading"
            element-loading-spinner="el-icon-loading"
            @click="getDataList"
          >
            搜索
          </el-button>
        </el-input>
      </div>
    </div>
    <!-- 操作区 E-->
    <!-- 表格操作区 S-->
    <div class="d_tableOperation">
      <div class="d_condition">

      </div>
      <div class="d_set">
        <div @click="Refresh"><i class="d_icon el-icon-refresh-right" /></div>
        <div class="setting flex">
          <HeadSeting :list-data.sync="tableHead" :table-code="$config.outStockProductList" @reset="getTableHead" />
        </div>
      </div>
    </div>
    <!-- 表格操作区 E-->
    <!--table板块-->
    <div ref="tableCon" class="tableCon">
      <el-table
        v-show="tableHead.length>0"
        id="emtable"
        ref="multipleTable"
        v-loading="searchLoading"
        :data="dataLists"
        :height="tableHeight || 'auto'"
        border
        fit
        style="width: 100%"
        @header-dragend="surverWidth"
      >
        <template v-for="(fruit,index) in tableHead">
          <el-table-column
            v-if="fruit.visible"
            :key="index"
            :label="fruit.columnName"
            :min-width="fruit.columnWidth || 110"
            :prop="fruit.columnCode"
            show-overflow-tooltip
            :fixed="fruit.isFloat?'left':false"
          >
            <template slot-scope="scope">
              <template v-if="fruit.columnCode==='outStockState'">
                <div class="flex">
                  <template v-if="scope.row.outStockState===0">
                    <span class="mr5 spot" style="background: #3F61F1" /><span>待确认</span>
                  </template>
                  <template v-else-if="scope.row.outStockState===1">
                    <span class="mr5 spot" style="background: #67C23A" /><span>已确认</span>
                  </template>
                  <template v-else>
                    <span class="mr5 spot" style="background:#E13335" /><span>已拒绝</span>
                  </template>
                </div>
              </template>
              <template v-else>
                {{ scope.row[fruit.columnCode] }}
              </template>
            </template>
          </el-table-column>
        </template>
        <el-table-column label="操作" width="70px" fixed="right" align="center">
          <template slot-scope="scope">
            <div>
              <el-popover
                :ref="`popover-${scope.$index}`"
                placement="bottom-end"
                popper-class="tableOp"
                width="160"
                :popper-options="{ boundariesElement: 'opBox', removeOnDestroy: true }"
                trigger="click"
              >
                <div class="operation">
                  <ul>
                    <li @click="seeInfo(scope.row)">查看</li>
                  </ul>
                </div>
                <div slot="reference" class="opBox pointer"><span class="el-icon-more c_3F61F1" /></div>
              </el-popover>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 骨架屏     -->
      <div v-if="tableHead.length==0" class="p16">
        <el-skeleton :rows="6" animated />
      </div>
    </div>
    <!-- 分页 S-->
    <div class="d_pag">
      <pagination
        :total="total||0"
        :page.sync="search.pageIndex"
        :limit.sync="search.pageSize"
        @pagination="getDataList"
      />
    </div>
    <!-- 分页 E-->
    <!-- 选择领料单 -->
    <el-dialog
      v-dialogDrag
      title="选择半成品领料单"
      :visible.sync="isPickingVisible"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="85%"
    >
      <div class="dialogDody">
        <!-- 搜索     -->
        <div class="btnCon flex flex_between" style="border-bottom: none">
          <!--      搜索框-->
          <div class="search">
            <el-input
              v-model="pickingSearch.likeWords"
              prefix-icon="el-icon-search"
              placeholder="输入关键字"
              size="small"
               @keyup.enter.native="getSelectPicking"
            >
              <!-- <el-button
                slot="append" 
                :loading="purLoading"
                type="primary"
                icon="el-icon-search"
                :disabled="purLoading"
                element-loading-spinner="el-icon-loading"
                @click="getSelectPicking"
              >
                搜索
              </el-button> -->
            </el-input>
          </div>
        </div>
        <!-- 表格区域       -->
        <div class="tableCon not pt0" style="padding: 16px">
          <el-table
            v-loading="purLoading"
            :data="pickingList"
            height="530"
            :row-class-name="tableRowClassName"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="getProductBillNo"
              label="领料单号"
              min-width="170"
            />
            <el-table-column
              prop="getProductTypeName"
              label="领料类型"
              min-width="100"
            />

            <el-table-column
              prop="xieYiShuHao"
              label="订单单号"
              min-width="150"
            />
            <el-table-column
              prop="productName"
              label="产品名称"
              min-width="150"
              show-overflow-tooltip
            />
            <el-table-column
              prop="customerBillNo"
              label="客户单号"
              show-overflow-tooltip
              min-width="110"
            />
            <!-- <el-table-column
              prop="productCode"
              label="产品编码"
              show-overflow-tooltip
              min-width="110"
            /> -->

            <el-table-column
              prop="createDate"
              label="创建时间"
              show-overflow-tooltip
              min-width="110"
            />
            <el-table-column
              prop="getProductPersonName"
              label="领料人员"
              min-width="100"
            />
            <el-table-column
              prop="equipmentName"
              label="领料设备"
              min-width="90"
            />
            <el-table-column
              prop="getProductKindCount"
              label="领料明细"
              show-overflow-tooltip
              min-width="120"
            />
            <el-table-column
              prop="sumQuantity"
              label="总数量"
              show-overflow-tooltip
              min-width="120"
            />
            <el-table-column
              prop="createPersonName"
              label="创建人员"
              min-width="90"
            />
            <el-table-column
              prop="getProductRemark"
              label="备注"
              min-width="150"
              show-overflow-tooltip
            >
              <template scope="{row}">
                {{ row.getProductRemark || '--' }}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="100px"
              fixed="right"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="medium"
                  style="color: #606266"
                  @click="confirmSelecd(scope.row)"
                >
                  选择
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
    <!--  新建、半成品出库弹框   -->
    <el-dialog
      title="半成品出库"
      :visible.sync="isAddDialog"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="85%"
      @close="closeDialog"
    >
      <div class="dialogDody">
        <div class="subTip">
          <span class="mr15"><span class="mr5">出库单号：</span>{{ pickingForm.outStockProductNo || '系统自动生成' }}</span>
          <span class="mr15"><span class="mr5">创建日期：</span>{{ pickingForm.createTime || dayjs().format('YYYY-MM-DD') }}</span>
          <span><span class="mr5">创建人员：</span>{{ name }}</span>
        </div>
        <div class="addWuliaoBox">
          <el-form
            ref="pickingForm"
            :model="pickingForm"
            :rules="rules"
            label-width="95px"
            label-position="left"
            class="dialogForm dialogInlineForm"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item label="出库类型">
                  <el-input v-model="pickingForm.outStockProductTypeName" placeholder="请输入领料类型" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="关联单据">
                  <el-input v-model="pickingForm.associationProductNo" placeholder="关联单据" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="申请人员">
                  <el-input
                    v-model="pickingForm.receivePersonName"
                    placeholder="请输入内容"
                    disabled
                    size="mini"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="领料设备">
                  <el-input v-model="pickingForm.equipmentName" placeholder="领料设备" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户单号">
                  <el-input v-model="pickingForm.customerBillNo" placeholder="客户单号" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="产品名称">
                  <el-input v-model="pickingForm.productName" placeholder="产品名称" size="mini" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="版本版面">
                  <el-input v-model="pickingForm.productVersion" placeholder="版本版面" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="生产单号">
                  <el-input v-model="pickingForm.produceTaskBillNo" placeholder="生产单号" size="mini" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="领料备注" class="inlineText">
                  <el-input v-model="pickingForm.getProductRemark" type="textarea" :rows="1" placeholder="请输入领料备注" size="mini" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="出库备注" class="inlineText mt5">
                  <el-input v-model="pickingForm.outStockBillRemark" type="textarea" :rows="1" placeholder="请输入出库备注" size="mini" clearable />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="tableBox expandBox">
            <div class="tt flex flex_between">
              <span class="fw">领料明细</span>
            </div>
            <el-table
              :data="pickingForm.detailList"
              border
              default-expand-all
              style="width: 100%"
            >
              <el-table-column type="expand">
                <template slot-scope="{row}">
                  <div class="dialogExpandTable">
                    <el-table
                      :data="row.ggMxList || []"
                      :header-cell-style="{background:'#3f61f110'}"
                    >
                      <el-table-column
                        prop="cartonSizeName"
                        label="纸箱规格"
                        min-width="90"
                      />
                      <el-table-column
                        prop="packageDescription"
                        label="包装描述"
                        min-width="90"
                      />
                      <el-table-column
                        prop="eachBoxQuantity"
                        label="每箱数量"
                        min-width="90"
                      />
                      <el-table-column
                        prop="stockBoxCount"
                        label="库存箱数"
                        min-width="90"
                      />
                      <el-table-column
                        prop="stockQuantity"
                        label="库存数量"
                        min-width="100"
                      />
                      <el-table-column
                        prop="outStockBoxs"
                        label="出库箱数"
                        min-width="100"
                      >
                        <template slot-scope="{row}">
                          <el-input v-model="row.outStockBoxs" placeholder="出库箱数" size="mini" clearable />
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="outStockQuantity"
                        label="出库数量"
                        min-width="90"
                      >
                        <template slot-scope="{row}">
                          <el-input v-model="row.outStockQuantity" placeholder="出库数量" size="mini" clearable />
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="出库库位"
                        prop="stockArea"
                        min-width="150"
                      >
                        <template slot-scope="{row}">
                          <el-cascader
                            v-model="row.stockArea"
                            size="mini"
                            clearable
                            :options="storageLocations"
                            :props="{label: 'name', value: 'code'}"
                          />
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="outStockRemark"
                        label="备注"
                        show-overflow-tooltip
                        min-width="150"
                      >
                        <template slot-scope="{row}">
                          <el-input v-model="row.outStockRemark" placeholder="出库备注" size="mini" clearable />
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="成品编号"
                prop="productNo"
                show-overflow-tooltip
                min-width="110"
              />
              <el-table-column
                label="成品类型"
                prop="productCategory"
                min-width="90"
              />
              <el-table-column
                label="所属客户"
                prop="customerName"
                show-overflow-tooltip
                min-width="110"
              />
              <el-table-column
                label="半成品名称"
                prop="productName"
                show-overflow-tooltip
                min-width="110"
              />
              <el-table-column
                label="包含工艺"
                prop="finishedCraftNames"
                min-width="150"
              />
              <el-table-column
                label="库存数量"
                show-overflow-tooltip
                min-width="90"
                prop="stockQuantity"
              />
              <el-table-column
                label="领料数量"
                show-overflow-tooltip
                min-width="90"
                prop="applyGetQuantity"
              />
              <el-table-column
                label="单位"
                prop="productUnit"
                min-width="80"
              />
              <el-table-column
                label="备注"
                show-overflow-tooltip
                min-width="150"
                prop="getProductRemark"
              />
            </el-table>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isAddDialog=false">取 消</el-button>
        <!-- 拒绝       -->
        <el-button
          :loading="addLoading"
          :disabled="addLoading"
          element-loading-spinner="el-icon-loading"
          type="warning"
          size="mini"
          @click="refuseOut"
        >拒绝</el-button>
        <!--  同意      -->
        <el-button
          :loading="addLoading"
          :disabled="addLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="saveAdd"
        >同意</el-button>
      </div>
    </el-dialog>
    <!--  查看半成品出库弹框   -->
    <el-dialog
      title="半成品出库"
      :visible.sync="isSeevisible"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="85%"
      @close="closeDialog"
    >
      <div class="dialogDody">
        <div class="subTip">
          <span class="mr15"><span class="mr5">出库单号：</span>{{ pickingForm.outStockBillNo || '系统自动生成' }}</span>
          <span class="mr15"><span class="mr5">创建日期：</span>{{ pickingForm.createTime || dayjs().format('YYYY-MM-DD') }}</span>
          <span><span class="mr5">创建人员：</span>{{ pickingForm.createPersonName }}</span>
        </div>
        <div class="addWuliaoBox">
          <el-form
            ref="pickingForm"
            :model="pickingForm"
            :rules="rules"
            label-width="95px"
            label-position="left"
            class="dialogForm dialogInlineForm"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item label="出库类型">
                  <el-input v-model="pickingForm.outStockTypeName" placeholder="请输入领料类型" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="关联单据">
                  <el-input v-model="pickingForm.associationBillNo" placeholder="关联单据" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="申请人员">
                  <el-input
                    v-model="pickingForm.getProductPersonName"
                    placeholder="请输入内容"
                    size="mini"
                    disabled
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="领料设备">
                  <el-input v-model="pickingForm.equipmentName" placeholder="领料设备" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户单号">
                  <el-input v-model="pickingForm.customerBillNo" placeholder="客户单号" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="产品名称">
                  <el-input v-model="pickingForm.productName" placeholder="产品名称" size="mini" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="版本版面">
                  <el-input v-model="pickingForm.productVersion" placeholder="版本版面" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="生产单号">
                  <el-input v-model="pickingForm.produceTaskBillNo" placeholder="生产单号" size="mini" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="领料备注" class="inlineText">
                  <el-input v-model="pickingForm.getProductRemark" type="textarea" :rows="1" placeholder="请输入领料备注" size="mini" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="出库备注" class="inlineText mt5">
                  <el-input v-model="pickingForm.outStockBillRemark" type="textarea" :rows="1" placeholder="请输入出库备注" size="mini" disabled />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="tableBox lastTdNoBorder expandBox">
            <div class="tt flex flex_between">
              <span class="fw">领料明细</span>
            </div>
            <el-table
              :data="pickingForm.outStockMxList"
              border
              default-expand-all
              style="width: 100%"
            >
              <el-table-column type="expand">
                <template slot-scope="{row}">
                  <div class="dialogExpandTable">
                    <el-table
                      :data="row.ggCpFhList || []"
                      :header-cell-style="{background:'#3f61f110'}"
                    >
                      <el-table-column
                        prop="cartonSizeName"
                        label="纸箱规格"
                        min-width="90"
                      />
                      <el-table-column
                        prop="packageDescription"
                        label="包装描述"
                        min-width="90"
                      />
                      <el-table-column
                        prop="eachBoxQuantity"
                        label="每箱数量"
                        min-width="90"
                      />
                      <el-table-column
                        prop="outStockBoxs"
                        label="出库箱数"
                        min-width="100"
                      />
                      <el-table-column
                        prop="outStockQuantity"
                        label="出库数量"
                        min-width="90"
                      />
                      <el-table-column
                        label="出库库位"
                        prop="areaShelfName"
                        min-width="150"
                      >
                        <template slot-scope="{ row }">
                              {{ row.warehouseAreaName+row.areaShelfName }}
                            </template>
                      </el-table-column>
                      <el-table-column
                        prop="outStockRemark"
                        label="备注"
                        show-overflow-tooltip
                        min-width="150"
                      />
                    </el-table>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="成品编号"
                prop="productNo"
                show-overflow-tooltip
                min-width="110"
              />
              <el-table-column
                label="成品类型"
                prop="productType"
                min-width="90"
              />
              <el-table-column
                label="所属客户"
                prop="customerName"
                show-overflow-tooltip
                min-width="110"
              />
              <el-table-column
                label="半成品名称"
                prop="productName"
                show-overflow-tooltip
                min-width="110"
              />
              <el-table-column
                label="包含工艺"
                prop="containCrafts"
                min-width="90"
              />
              <el-table-column
                label="领料数量"
                show-overflow-tooltip
                min-width="90"
                prop="getMaterialQuantity"
              />
              <el-table-column
                label="出库箱数"
                show-overflow-tooltip
                min-width="90"
                prop="outStockSumBoxCount"
              />
              <el-table-column
                label="出库数量"
                show-overflow-tooltip
                min-width="90"
                prop="outStockSumQuantity"
              />
              <el-table-column
                label="单位"
                prop="productUnit"
                min-width="80"
              />
              <el-table-column
                label="备注"
                show-overflow-tooltip
                min-width="150"
                prop="getMaterialRemark"
              />
            </el-table>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isSeevisible=false">取 消</el-button>
        <!-- 确定       -->
        <el-button
          type="primary"
          size="mini"
          @click="isSeevisible=false"
        >确定</el-button>
      </div>
    </el-dialog>
    <!--    拒绝原因弹框-->
    <el-dialog
      title="拒绝原因"
      :visible.sync="reasonVisible"
      :close-on-click-modal="false"
      custom-class="comDialog"
      append-to-body
      width="30%"
      @close="closeCancelDialog"
    >
      <div class="dialogDody">
        <el-form
          ref="cancelForm"
          :model="cancelForm"
          :rules="cancelRules"
          label-width="0px"
          class="dialogForm"
        >
          <el-form-item label="" prop="stockStateDesc">
            <el-input
              v-model="cancelForm.stockStateDesc"
              type="textarea"
              :autosize="{ minRows: 2}"
              placeholder="请输入内容"
              size="mini"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="reasonVisible=false">取 消</el-button>
        <el-button
          v-loading="addLableLoading"
          :disabled="addLableLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="refuseInstock"
        >保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import MixA from '@/utils/mixin'
import { arraySort } from '@/utils'
import Pagination from '@/components/Pagination'
import HeadSeting from '@/components/HeadSeting'
import screec from "@/components/screen";
const mixa = new MixA()
import { mapGetters } from 'vuex'
export default {
  name: '',
  components: { Pagination, HeadSeting,screec },
  mixins: [mixa],
  computed: {
    ...mapGetters([
      'name',
      'userInfo'
    ])
  },
  data() {
    return {
      addLableLoading: false,
      reasonVisible: false, // 拒绝原因弹框显示隐藏
      addLoading: false, // 半成品同意或者拒绝加载
      isSeevisible: false, // 查看半成品领料出库弹框隐藏显示
      isSelect: false, // 选择半成品领料获取库存信息
      isAddDialog: false, // 半成品出库审核弹框显示隐藏
      isPickingVisible: false, // 半成品领料单弹框显示隐藏
      searchLoading: false, // 半成品列表加载
      radioSelect: null, // 半成品单选中单号
      currentRow: {}, // 半成品单选中行
      pickingList: [], // 半成品领料列表
      pickingSearch: {
        likeWords: '',
        outStockState: 0
      },
      purLoading: false, // 半成品领料表格加载
      search: {
        QueryDataBaseFiled:'',
        pageIndex: 1,
        pageSize: 30,
        likeWords: '',
      }, // 搜索条件
      pickingForm: {
        outStockProductTypeName: '半成品出库',
        associationProductNo: '', // 关联单据号
        equipmentNo: '', // 领料设备
        equipmentName: '', // 领料设备名称
        getProductRemark: '', // 领料备注
        receivePerson: '', // 申请人员代码
        receivePersonName: '', // 申请人员名称
        outStockBillRemark: '', // 出库备注说明
        detailList: []
      }, // 半成品出库表单
      dataLists: [], // 半成品出库列表
      total: 0,
      storageLocations: [], // 库位列表
      tableHeight: null,
      tableHead: [], // 表头
      cancelForm: {
        stockStateDesc: ''
      },
      rules: {

      },
      cancelRules: {
        stockStateDesc: [
          { required: true, message: '请填写拒绝原因', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    // 半成品出库表头
    this.getTableHead()
    // 得到半成品领料列表
    this.getSelectPicking()
    // 库区库位
    this.getStorageLocations()
  },
  mounted() {
    this.calHeight()
  },
  methods: {
    // 拒绝半成品出库
    refuseInstock() {
      this.$refs.cancelForm.validate((valid) => {
        if (valid) {
          this.addLableLoading = true
          const params = {
            getProductBillNo: this.pickingForm.associationProductNo,
            refuseReason: this.cancelForm.stockStateDesc
          }
          this.$api.warehouse.RefuseGetSemiFinishedProductBill(params).then(() => {
            this.$message({
              message: '已拒绝',
              type: 'success'
            })
            this.getDataList()
            this.isAddDialog = false
            this.reasonVisible = false
          }).catch(() => {
            this.addLableLoading = false
          })
        }
      })
    },
    // 拒绝半成品出库点击事件
    refuseOut() {
      this.reasonVisible = true
    },
    // 同意半成品出库
    saveAdd() {
      
     this.addLoading = true
     let arr = []
     console.log(this.pickingForm)
      this.pickingForm.detailList.forEach((i)=>{
        i.ggMxList.forEach((j)=>{
          arr.push({
            productNo:j.productNo,
            productStockNo:j.productStockNo,
            outStockBoxs:j.outStockBoxs,
            outStockQuantity:j.outStockQuantity,
            warehouseAreaCode : j.stockArea[0],
            areaShelfCode : j.stockArea[1],
            outStockRemark:j.outStockRemark
          })
        })
      })
      this.pickingForm.associationBillNo = this.pickingForm.associationProductNo
      this.pickingForm.outStockMxList = arr
      const params = this.pickingForm
        this.$api.warehouse.AddOutStockProduct(params).then(() => {
          // 半成品出库列表
          this.getDataList()
          this.$message({
            message: '出库成功',
            type: 'success'
          })
          this.isAddDialog = false
          this.addLoading = false
        }).catch(() => {
          this.addLoading = false
        })
    },
    // 查看领料出库
    seeInfo(data) {
      this.isSeevisible = true
      this.getInfo(data.outStockID)
    },
    // 半成品领料单确认
    async confirmSelecd(row) {
      this.isSelect = true
      const arr = JSON.parse(JSON.stringify(row.mxDataList))
      this.pickingForm = row
      this.pickingForm.detailList = arr
      this.pickingForm.detailList.forEach((i)=>{
        i.ggMxList.forEach((j)=>{
          j.warehouseAreaCode = ''
          j.areaShelfCode = ''
          j.stockArea =''
        })
      })
      this.pickingForm.associationProductNo = row.getProductBillNo
      this.pickingForm.receivePerson = row.getProductPerson
      this.pickingForm.receivePersonName = row.getProductPersonName
      this.pickingForm.equipmentNo = row.equipmentNo
      this.pickingForm.equipmentName = row.equipmentName
      this.pickingForm.customerBillNo = row.customerBillNo
      this.pickingForm.productName = row.productName
      this.pickingForm.produceTaskBillNo = row.produceTaskBillNo
      this.pickingForm.productVersion = row.productVersion
      this.isPickingVisible = false
      this.isAddDialog = true
    },
    // 新建点击事件
    newAddClick() {
      this.isPickingVisible = true
    },
    // 库区库位
    getStorageLocations() {
      const parmas = {
        warehouseCode: ''
      }
      this.$api.warehouse.GetStockQueryAreaTreeView(parmas).then(res => {
        this.storageLocations = res
      })
    },
    // 得到半成品领料列表
    getSelectPicking() {
      const params = this.pickingSearch
      this.purLoading = true
      this.$api.warehouse.GetMatchGetSemiFinishedProductBills(params).then(res => {
        this.pickingList = res
        this.purLoading = false
      }).catch(() => {
        this.purLoading = false
      })
    },
    // 给选中一行添加class
    tableRowClassName({ row }) {
      if (this.currentRow.getProductBillNo === row.getProductBillNo) {
        return 'selectd'
      }
    },
    // 半成品单详情
    getInfo(id) {
      const params = {
        queryBy: 1,
        queryValue: id
      }
      this.infoLoading = true
      this.$api.warehouse.GetSingleOutStockProduct(params).then(res => {
        this.pickingForm = res
        console.log(this.pickingForm)
        this.infoLoading = false
      }).catch(() => {
        this.infoLoading = false
      })
    },
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.tableCon.getBoundingClientRect()
        this.tableHeight = rect.height
      })
    },
    // 半成品出库列表，清除所有查询条件
    Refresh() {
      this.search = this.$options.data().search
      this.getDataList()
    },
    // 半成品出库表头
    getTableHead() {
      const parmas = {
        tableCode: this.$config.SemiProductOutStockList 
      }
      this.$api.common.getAllTableHead(parmas).then(res => {
        res.sort(arraySort('columnSort'))
        this.tableHead = res
        // 半成品出库列表
        this.getDataList()
      })
    },
    getDataList() {
      const params = this.search
      this.searchLoading = true
      this.$api.warehouse.GetPageSemiProductOutStockBills(params).then(res => {
        this.dataLists = res.list
        this.total = res.totalCount
        this.dataList.forEach((item)=>{
            for(let i in item){
              if(!item[i] && item[i] !== 0){
                item[i] = '--'
              }
            }
          })
        
        this.searchLoading = false
      }).catch(() => {
        this.searchLoading = false
      })
    },
    closeDialog() {
      if (this.$refs.pickingForm) {
        this.$refs.pickingForm.resetFields()
      }
      this.pickingForm = this.$options.data().pickingForm
    },
    closeCancelDialog() {
      if (this.$refs.cancelForm) {
        this.$refs.cancelForm.resetFields()
      }
      this.cancelForm = this.$options.data().cancelForm
    }
  }
}
</script>
<style lang="scss" scoped>
.spot{
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 100%;
}
.subTip {
  border-bottom: 1px #e6e6e6 solid;
  background: #f5f6f9;
  padding: 8px 16px;
}
.addWuliaoBox {
  padding: 10px 16px;

  .tableBox {
    margin-top: 16px;
    border: 1px solid #e6e6e6;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    overflow: hidden;

    .tt {
      height: 38px;
      line-height: 38px;
      padding-left: 16px;
      background: #f7f8fa;
      border-radius: 8px 8px 0 0;
    }
  }
}
</style>
